<script setup lang="ts">
// import { ref, reactive, defineProps } from 'vue'

// 传入的数据格式
//  {
//     "realTradeVolume": "1",
//     "realTradingVolume": "20000",
//     "shopId": "1567782437451268096",
//     "productId": "1567793953431777280",
//     "productName": "阳阳测试",
//     "pic": "https://obs.xiaoqa.cn/gruul/20220908/00c6ace96dc04a89a5b09ca5726dcc94.jpg"
// }
interface ListType {
    realTradeVolume: string
    realTradingVolume: string
    shopId: string
    productId: string
    productName: string
    pic: string
}
// props 接受一个对象
const $props = defineProps({
    list: {
        type: Object as () => ListType,
        default: () => {},
    } as const,
})
console.log($props.list)
</script>

<template>
    <view class="shoplist">
        <view class="shoplist__left">
            <u-image width="100%" height="100%" :src="$props.list.pic"></u-image>
        </view>
        <view class="shoplist__right">
            <view class="shoplist__right--name">{{ $props.list.productName }}</view>
            <view class="item">
                <view class="shoplist__right--price">￥{{ (Number($props.list.realTradingVolume) / 10000).toFixed(2) }}</view>
                <view class="shoplist__right--priceone">销量:{{ $props.list.realTradeVolume }}</view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(item) {
    display: flex;
    justify-content: space-between;
}
@include b(shoplist) {
    display: flex;
    margin-bottom: 56rpx;
    @include e(left) {
        width: 122rpx;
        height: 122rpx;
        border-radius: 16rpx;
    }
    @include e(right) {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 30rpx;
        @include m(name) {
            height: 46rpx;
            width: 480rpx;
            line-height: 46rpx;
            overflow: hidden;
            font-size: 28rpx;
            text-align: left;
            //单行文本超出部分显示省略号
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        @include m(price) {
            line-height: 46rpx;
            color: #101010;
            font-weight: 700;
            text-align: left;
        }
        @include m(priceone) {
            line-height: 46rpx;
            color: #101010;
            font-weight: 700;
            text-align: left;
            margin-right: 40rpx;
        }
    }
}
</style>
